import React, { Component, PureComponent } from 'react';
import { Button } from 'antd'

export default class Father extends Component {
  state = { count: 0 }
  onAdd = () => {
    this.setState({ count: this.state.count + 1})
  }
  onReduce = () => {
    this.setState({ count: this.state.count - 1})
  }

  render() {
    console.log('Father --- render');
    const { count } = this.state
    return (
      <div>
        <h2>当前计数：{count}</h2>
        <Button onClick={this.onAdd}>+1</Button>
        <Button onClick={this.onReduce}>-1</Button>
        <SonA></SonA>
        <SonB />
        <SonC />
      </div>
    )
  }
}

class SonA extends Component {
  state = { str: 'A' }
  render() {
    console.log('SonA --- render');
    return (
      <div>
        <h3>自定义纯组件: {this.state.str}</h3>
      </div>
    )
  }
}

class SonB extends Component {
  state = { str: 'B' }

  //通过shouldComponentUpdate生命周期函数进行拦截，返回 false则不更新
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.str !== this.state.str
  }

  render() {
    console.log('SonB --- render');
    return (
      <div>
        <h3>自定义纯组件: {this.state.str}</h3>
      </div>
    )
  }
}

//PureComponent就算是内置重写了shouldComponentUpdate方法，进行判断比较
class SonC extends PureComponent {
  state = { str: 'C' }
  render() {
    console.log('SonC --- render');
    return (
      <div>
        <h3>React纯组件: {this.state.str}</h3>
      </div>
    )
  }
}
